<template>
  <div class="goods-details">
    <p>{{detailsForm.id}}</p>
    <p style="font-size: 24px;">{{detailsForm.goodsName}}</p>
    <p>{{ detailsForm.payStatus | statusFilter }}</p>
    <el-form label-width="110px">
      <el-form-item label="下单时间:">{{detailsForm.payTime}}</el-form-item>
      <el-form-item label="核销人:">{{detailsForm.userName}}</el-form-item>
      <el-form-item label="核销时间:">{{detailsForm.writeOffTime}}</el-form-item>
      <el-form-item label="客户实付金额:">{{detailsForm.paidAmount}}</el-form-item>
      <el-form-item label="商户实收金额:">{{detailsForm.paidShopAmount}}</el-form-item>
    </el-form>
    <p>
      <el-button type="primary" @click="$emit('closeDialog')">关闭</el-button>
    </p>

  </div>
</template>

<script>
  export default {
    props: ['row'],
    filters: {
      statusFilter(type) {
        switch(type) {
          case 0:
            return '待支付'
          case 1:
            return '已支付'
          case 2:
            return '取消支付'
          case 3:
            return '支付失败'
          case 4:
            return '已退款'
          case 5:
            return '待核销'
          case 6:
            return '已核销'
        }
      }
    },
    data() {
      return {
        detailsForm: {}
      }
    },
    mounted() {
      this.getDetailsById(this.row.id)
    },
    methods: {
      getDetailsById(id) {
        this.$axios({
          method: 'get',
          url: '/shop/shop-order/get-by-id',
          params: {id: id}
        }).then((res) => {
          if(res.code == 200) {
            this.detailsForm = res.data;
          }
        })
      },

    }
  }
</script>

<style scoped>
  p {
    text-align: center;
    margin: 10px;
  }

  .el-form {
    /* display: inline-block; */
    width: 360px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .el-form-item {
    /* border: 1px solid green; */
    margin: 0;
  }



</style>
